<template>
  <div class='container' >
    <el-dialog title="提示" :visible.sync="dialogVisible" width="900"  center>
      <el-row :gutter="20">
        <el-col :span="6"><div class="grid-content bg-purple">【题型】: {{getQuestionType}}</div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple">【编号】: {{FormList.id}}</div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple">【难度】: {{getDifficulty}}</div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple">【标签】: {{FormList.tags}}</div></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6"><div class="grid-content bg-purple">【学科】: {{FormList.subjectName}}</div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple">【目录】: {{FormList.directoryName}}</div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple">【方向】: {{FormList.direction}}</div></el-col>
      </el-row>
    <el-divider></el-divider>
    <el-row :gutter="20">
        <el-col :span="24"><div class="grid-content bg-purple">【题干】: </div></el-col>
        <el-col :span="24"><div class="grid-content bg-purple questiondet" v-html="FormList.question"></div></el-col>
        <el-col :span="24" v-show="+FormList.questionType === 1 || +FormList.questionType === 2"><div class="grid-content bg-purple">{{getQuestionType}} 选项：（以下选中的选项为正确答案）</div></el-col>
        <el-col :span="24"><div class="grid-content bg-purple">
           <el-radio-group v-model="isRights.id"   v-if="+FormList.questionType === 1">
            <div v-for="item in FormList.options" :key="item.id" >
              <el-radio  :disabled="item.isRight === 0"  :label="item.id">{{ item.title }}</el-radio>
            </div>
          </el-radio-group>
          <el-row v-for="item in FormList.options" :key="item.id" v-else-if="+FormList.questionType === 2" >
            <el-checkbox
              :checked="Boolean(item.isRight)"
              :disabled="item.isRight === 0"
              >{{ item.title }}</el-checkbox
            >
          </el-row>
        </div></el-col>
    </el-row>
  <el-divider></el-divider>
    <div  class="answer">【参考答案】 ：
      <el-button type="danger" @click="ClickVideo">视频答案预览</el-button> <br/>
        <video ref="video" width="320" height="240" src="https://v-cdn.zjol.com.cn/277004.mp4" v-if="ISvideo"  controls='controls' autoplay  />
    </div>
   <el-divider></el-divider>
    <div class="analysis">【答案解析】 ：<span v-html="FormList.answer"></span></div>
  <el-divider></el-divider>
    <div class="remark">【题目备注】 ： {{FormList.remarks}}</div>
    <!-- 底部 -->
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false"  type="primary">关闭</el-button>
    </span>
  </el-dialog>
  </div>

</template>

<script>
import { detail as getDetailAPI } from '@/api/hmmm/questions'
import { difficulty as getDifficultyAPI, questionType as getQuestionTypeAPI } from '@/api/hmmm/constants'
export default {
  name: 'QuestionsPiece',
  data () {
    return {
      dialogVisible: false,
      formData: {
        id: '',
        isNext: false,
        options: []
      },
      FormList: {
        questions: [1, 2, 3, 4, 5]
      },
      // 视频显示隐藏
      ISvideo: false,
      // checkboxGroup1: [2, 4],
      // cities: [1, 2, 3, 4, 5]
      isRights: {}, // 单选勾选的列表
      radio: '1'
    }
  },
  methods: {
    /**
     * 点击显示视频
     */
    ClickVideo () {
      this.ISvideo = true
    },
    /**
     * 获取弹框内容
     */
    async getDetail (id) {
      this.formData = {}
      this.formData.id = id
      const { data: res } = await getDetailAPI(this.formData)
      this.FormList = res
      const obj = res.options.find(item => item.isRight === 1)
      this.isRights = obj
    }

  },
  computed: {
    /**
     * 转换题型
     */
    getQuestionType () {
      return getQuestionTypeAPI.find(item => item.value === +this.FormList.questionType)?.label
    },
    /**
     * 转换难度
     */
    getDifficulty () {
      return getDifficultyAPI.find(item => item.value === +this.FormList.difficulty)?.label
    }
  },
  watch: {
    dialogVisible (val) {
      if (!val) {
        if (this.ISvideo) {
          this.ISvideo = false
          this.$refs.video.pause()
          this.$refs.video.load()
        }
      }
    }
  }
}
</script>

<style scoped lang='scss'>
.container{
  width: 100%;
  ::v-deep{
    .el-dialog{
       margin-top: 5vh !important;
      .el-col{
      min-height: 25px;
      .questiondet{
        color: blue;
      }
    }
    // 单选多选框
    .el-radio,
    .el-checkbox
    {
      height: 25px;
    }
    // 答案解析
    .analysis{
      p{
        display: inline-block;
      }
    }
    // 分割线样式
    .el-divider--horizontal{
      margin: 15px 0;
    }
   }
  }
}

</style>
